<script setup>
import Card from './Card.vue';
</script>
<template>
    <div class="page">
        <div class="top">
            <div>游戏大世界</div>
            <div>热门游戏等你来玩</div>
            <div>快来一起玩耍吧</div>
        </div>
        <div class="title">
            <Card title="王者荣耀">
                礼册大礼包，多种记忆碎片，抽出惊喜，无所畏惧，百分之十抽到嬴政限定皮肤<span style="color:red;">(现场价100点卷即可抽十发)</span>
            </Card>
            <Card title="金铲铲之战">
                限时S8赛季即将返场，<span style="color:red;">现推出S13赛季6费牌问世！！</span>极力爆爆稳住全场，金克斯大招飞天上，范德尔-爆爆-蔚来奥一家完美团聚
            </Card>
            <Card title="蛋仔派对">
                新蛋皮肤：’牛魔王‘紫皮，售价保底60RMB，周六日玩耍即可拥有6个彩虹币！<span style="color:red;">莱卡-白色小狗保底50抽270RMB</span>
            </Card>
            <Card title="第五人格">
                <span style="color:red;">伦敦的雾中杀手？纯粹的艺术疯子！“杰克”</span>这款游戏以其独特的游戏机制、哥特式的画风、恐怖悬疑的剧情以及丰富的角色设定，成为了竞技游戏领域的一颗璀璨明星。
            </Card>
            <Card title="愤怒的小鸟">
                为了报复偷走鸟蛋的坏猪们，鸟儿以自己的身体为武器，仿佛炮弹一样去攻击他们的堡垒。每个关卡都需要<span style="color:red;">逻辑、技能、力量</span>三者相结合才能顺利过关。
            </Card>
        </div>
    </div>
</template>
<style scoped>
.page {
    width: 375px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow:  -2px 2px 10px #ccc;
}
.top{
    display: flex;
    font-size: 12px;
    width: 100%;
    height: 25px;
    gap: 20px;
    text-align: center;
    padding: 0 20px;
    color: #858585;
}
</style>